<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS008-学生信息表案例</title>
</head>
<style>
  body {
    font-size: 30px;
    color: snow;
    background-color: #333;
  }

  table {
    border-collapse: collapse;
    /* margin: 0 auto; */
  }

  th,
  td {
    border: 1px solid snow;
    padding: 10px 20px;
    text-align: center;
  }

  th {
    background-color: #111;
  }
</style>

<body>
  <script>
    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]

    writeStudents(students);

    function writeStudents(stus) {
      document.writeln('<table>');

      document.writeln('<tr>');
      for (let key in stus[0]) {
        document.writeln(`<th>${key}</th>`);
      }
      document.writeln('</tr>');

      for (let i = 0; i < stus.length; i++) {
        document.writeln('<tr>');
        for (let stu in stus[i]) {
          document.writeln(`<td>${stus[i][stu]}</td>`);
        }
        document.writeln('</tr>');
      }

      document.writeln('</table>');
    }

  </script>
</body>

</html>